﻿<%@ Page Title="Graph" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Graph.aspx.vb" Inherits="WRDBWeb.Graph" culture="auto" meta:resourcekey="PageResource1" uiculture="auto" MaintainScrollPositionOnPostback="false" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .dlg label
        {
            font-size:0.85em;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">

    <%--following mousewheel widget taken from https://github.com/brandonaaron/jquery-mousewheel--%>
    <script src="Scripts/jquery.mousewheel.js" type="text/javascript"></script>

    <script>
        var lastX = 0;
        var lastY = 0;
        var dragging = false;
        var wheelTimestamp = new Date().getTime();

        function pageLoad() {
            //capture double-click on tablename
            $("[id$='lstCalcType']").dblclick(function () {
                $("[id$='btnOKOptions']").click
            });

            //mousewheel zoom on chart (but don't let it fire too quickly)
            $("[id$='divChart']").mousewheel(function (event, delta, deltaX, deltaY) {

                event.preventDefault();

                //if last mousescroll happened less than 200 ms ago, update and do nothing
                var timeNow = new Date().getTime();
                if (timeNow - wheelTimestamp < 200) {
                    wheelTimestamp=timeNow;
                    return;
                } else {
                    wheelTimestamp=timeNow;
                    $("#<%=hdnMouseWheel.ClientID%>").val(delta);
                    __doPostBack('<%= UpdChart.ClientID%>', '');
                    $("[id$='btnZoomAll']").show();
                    return false;
                }
            });
            
            //mouse pan on chart (don't do continuous pan--too slow)

            $("[id$='divChart']").bind('dragstart', false); //this is necessary for IE9

            $("[id$='divChart']").mousedown(function (event) {
                if (event.which == 1) {
                    lastX = event.clientX
                    lastY = event.clientY
                    return false;
                }
            });
            
            $("[id$='divChart']").mouseup(function (event) {
                if (event.which == 1) {
                    var delta = (event.clientX - lastX) + ',' + (event.clientY - lastY)
                    //console.log(delta);
                    $("#<%=hdnPan.ClientID%>").val(delta);
                    lastX = event.clientX
                    lastY = event.clientY
                    if (delta != "0,0") {
                        __doPostBack('<%= UpdChart.ClientID%>', '');
                        $("[id$='btnZoomAll']").show();
                    };
                    return false;
                }
            });

            $("[id$='cboChartType']").change(function (event) {
                showProgress();
            });

            //jqplot initialization
            //var dataSeries

            //var options

            //var jqplot = $.jqplot("divJQPlot", dataSeries, options);

            //var line1 = [['2008-06-30 8:00AM', 4], ['2008-7-30 8:00AM', 6.5], ['2008-8-30 8:00AM', 5.7], ['2008-9-30 8:00AM', 9], ['2008-10-30 8:00AM', 8.2]];
            //var plot2 = $.jqplot('divJQPlot', [line1], {
            //    title: 'Customized Date Axis',
            //    gridPadding: { right: 35 },
            //    axes: {
            //        xaxis: {
            //            renderer: $.jqplot.DateAxisRenderer,
            //            tickOptions: { formatString: '%b %#d, %y' },
            //            min: 'May 30, 2008',
            //            tickInterval: '1 month'
            //        },
            //        yaxis: {
            //            renderer: $.jqplot.LogAxisRenderer,
            //            tickDistribution: 'power',
            //            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            //            labelOptions: {
            //                fontFamily:'Helvetica',
            //                fontSize: '14pt'
            //            },
            //            label: 'Y Axis Label'
            //        }
            //    },
            //    series: [{ lineWidth: 4, markerOptions: { style: 'square' } }]
            //});
        }
    </script>
    <section class="featured">
        <div class="content-wrapper">
            <table style="width:100%">
                <tr>
                    <td>
                        <hgroup class="title" >
                            <%-- for some reason the Title substitution doesn't work for this page --%>
                            <h1><asp:Label ID="lblPageTitle" runat="server" Text="Graph" meta:resourcekey="lblPageTitleResource1" EnableViewState="False"></asp:Label></h1>
                            <h2>
                                <asp:Label ID="lblInfo" runat="server" Text="A total of ? records are selected and available for graphing." meta:resourcekey="lblInfoResource1" EnableViewState="False"></asp:Label></h2>
                        </hgroup>
                    </td>
                    <td>
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/graph_highPerformanceComputingChart_5170_32xLG.png" meta:resourcekey="Image1Resource1" />
                    </td>
                </tr>
            </table>
         </div>
     </section>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    
    <%--following colorpicker widget taken from http://www.codeproject.com/Articles/452401/ColorPicker-a-jQuery-UI-Widget--%>

    <link href="Content/themes/base/evol.colorpicker.css" rel="stylesheet" /> 
    <script src="Scripts/evol.colorpicker.min.js" type="text/javascript"></script>

    <%--following graph widget taken from www.jqplot.com--%>

<%--    <script type="text/javascript" src="Scripts/jqplot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="Scripts/jqplot/jqplot.cursor.min.js"></script>
    <script type="text/javascript" src="Scripts/jqplot/jqplot.logAxisRenderer.min.js"></script>
    <script type="text/javascript" src="Scripts/jqplot/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="Scripts/jqplot/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="Scripts/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/jqplot/jquery.jqplot.min.css" />--%>

    <script type="text/javascript">
        function checkAll() {
            $("[id*=lstDelete] input:checkbox").prop("checked", true);
        }
    </script>

    <script>
        //this method requires that the page contain a div called divDialogProgress that looks like this:
        //        <div id="divDialogProgress" title="Please stand by..." style="display:none">
        //          <div id="divProgress"></div>
        //        </div>
        //Will also need the GetResource pagemethod in codebehind
        //It should be called after a button is clicked using OnClientClicked="showProgress(); return true;"

        function showProgress() {
            $("#divProgress").progressbar({
                value: false //indeterminate
            });

            PageMethods.GetResource("ProgressTitle", function (res) {
                $("#divDialogProgress").attr("title", res);
                var dlg = $("#divDialogProgress").dialog({
                    modal: true,
                    width: 300,
                    height: 100,
                    resizable: false,
                    draggable: false,
                    closeOnEscape: false,
                    close: function () { $(this).dialog('destroy').remove() } //the dialogs kept getting added and eventually would not close properly (maybe because placed in panel instead of div); this seems to fix it
                })
            })
        };
    </script>

    <asp:UpdatePanel runat="server">
        <Triggers>
            <asp:PostBackTrigger ControlID="cboChartType" />
            <asp:PostBackTrigger ControlID="btnAddLeft" />
            <asp:PostBackTrigger ControlID="btnAddRight" />
            <asp:PostBackTrigger ControlID="btnClear" />
        </Triggers>
        <ContentTemplate>
            <asp:Panel ID="pnlControls" runat="server" DefaultButton="btnAddLeft">
                <table style="width:100%">
                    <tr>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Label runat="server" ID="lblChartType" Style="white-space: nowrap" Text="Chart Type:" meta:resourcekey="lblChartTypeResource1" EnableViewState="False"></asp:Label>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:DropDownList ID="cboChartType" runat="server" AutoPostBack="True" ToolTip="Select the type of graph you want" meta:resourcekey="cboChartTypeResource1">
                                <asp:ListItem Text="Time Series" meta:resourcekey="ListItemResource1"></asp:ListItem>
                                <asp:ListItem Text="Column Chart" meta:resourcekey="ListItemResource9"></asp:ListItem>
                                <asp:ListItem Text="Depth Profile" meta:resourcekey="ListItemResource2"></asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Label runat="server" ID="lblStationID" Style="white-space: nowrap" Text="Station ID:" meta:resourcekey="lblStationIDResource1" EnableViewState="False"></asp:Label>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:DropDownList ID="cboStationID" runat="server" style="width:10em" AutoPostBack="True" ToolTip="Select which Station ID to use for the new series or (All Stations) to add multiple series." meta:resourcekey="cboStationIDResource1" Width="12em"></asp:DropDownList>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Label runat="server" ID="lblPCode" Style="white-space: nowrap" Text="PCode:" meta:resourcekey="lblPCodeResource1" EnableViewState="False"></asp:Label>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:DropDownList ID="cboPCode" runat="server" style="width:8em" AutoPostBack="True" ToolTip="This list of available PCodes is updated depending on the selected Station ID." meta:resourcekey="cboPCodeResource1" Width="10em"></asp:DropDownList>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Label runat="server" ID="lblDate" Style="white-space: nowrap" Visible="False" Text="Date-Time:" meta:resourcekey="lblDateResource1"></asp:Label>
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:DropDownList ID="cboDate" runat="server" style="width:8em" AutoPostBack="False" Visible="False" ToolTip="Select the date-time of the depth profile you want to plot." meta:resourcekey="cboDateResource1"></asp:DropDownList>
                        </td>
                        <td style="width: 100%">
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Button ID="btnAddLeft" runat="server" Text="&lt; Add" OnClientClick="showProgress(); return true;" ToolTip="Add a new series based on your selections; the series will be assigned to the left axis." meta:resourcekey="btnAddLeftResource1" />
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Button ID="btnAddRight" runat="server" Text="Add &gt;" OnClientClick="showProgress(); return true;" ToolTip="Add a new series based on your selections; the series will be assigned to the right axis." meta:resourcekey="btnAddRightResource1" />
                        </td>
                        <td style="vertical-align: middle; width: 1px; white-space: nowrap">
                            <asp:Button ID="btnClear" runat="server" Text="Clear" ToolTip="Clear all series from the graph." meta:resourcekey="btnClearResource1" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <hr />
    <asp:UpdatePanel ID="UpdChart" runat="server">
        <Triggers>
            <asp:PostBackTrigger ControlID="btnOptions" />
        </Triggers>
        <ContentTemplate>
            <div id="divChart" style="display:normal" runat="server">
                <asp:Chart ID="Chart1" runat="server" Width="1000px" meta:resourcekey="Chart1Resource1">
                    <Series>
                        <asp:Series Name="Series1" ChartType="Line" YValuesPerPoint="2">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
                <br />
                <asp:HiddenField ID="hdnMouseWheel" runat="server" />
                <asp:HiddenField ID="hdnPan" runat="server" />
            </div>

            <div id="divInstructions" style="display:normal" runat="server">
                <table align="center">
                    <tr>
                        <td style="width:800px; height:300px; text-align:center; vertical-align:middle">
                            <p>
                                <asp:Label ID="lblInstructions" runat="server" Font-Italic="True" Font-Size="Large" EnableViewState="False" meta:resourcekey="lblInstructionsResource1"></asp:Label>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>

            <%--<div id="divJQPlot" style="display:normal; width: 700px; height: 400px;"></div>--%>

            <hr />
            <div id="divFooter">
                <table style="width: 100%">
                    <tr>
                        <td style="text-align: left; width:1em;">
                            <asp:ImageMap ID="imgChartSize" runat="server" ImageUrl="~/Images/ChartSize.png" ToolTip="Change desired chart size" HotSpotMode="PostBack" BorderStyle="None" meta:resourcekey="imgChartSizeResource1" EnableViewState="False">
                                <asp:RectangleHotSpot PostBackValue="Small" Right="8" Top="23" meta:resourcekey="RectangleHotSpotResource1" />
                                <asp:RectangleHotSpot Left="9" PostBackValue="Medium" Right="23" Top="23" meta:resourcekey="RectangleHotSpotResource2" />
                                <asp:RectangleHotSpot Left="24" PostBackValue="Large" Right="47" Top="23" meta:resourcekey="RectangleHotSpotResource3" />
                            </asp:ImageMap>
                        </td>
                        <td style="text-align: left;">
                            <asp:Button ID="btnZoomAll" runat="server" Text="Zoom All" Style="margin-left: 20px; display:none;"  ToolTip="Reset the zoom/pan to display all the available data." meta:resourcekey="btnZoomAllResource1" />
                        </td>
                        <td style="text-align: right;">
                            <%--<asp:Button ID="btnOptions" runat="server" Text="Options" Style="margin-left: 20px;" OnClientClick="showOptionsDialog(); return false;" ToolTip="Display a dialog that allows you to customize the appearance of the graph." meta:resourcekey="btnOptionsResource1" />--%>
                            <asp:Button ID="btnOptions" runat="server" Text="Options" Style="margin-left: 20px;" ToolTip="Display a dialog that allows you to customize the appearance of the graph." meta:resourcekey="btnOptionsResource1" EnableViewState="False" />
                        </td>
                    </tr>
                </table>
            </div>

            <%--the following div is used to display the popup dialog for graph options--%>
            <asp:Panel ID="pnlOptions" runat="server" Style="display:none" DefaultButton="btnOKOptions" CssClass="dlg">
                <table align="center">
                    <tr style="display:none">
                        <td><asp:Label ID="lblColor" runat="server" Text="Colors of Lines & Symbols:" meta:resourcekey="lblColorResource1"></asp:Label></td>
                        <td><input id="txtColorLines" type="text" style="width:10em"/></td>
                        <td><input id="txtColorSymbols" type="text" style="width:10em"/></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="lblTitle" runat="server" Text="Graph Title:" meta:resourcekey="lblTitleResource1"></asp:Label></td>
                        <td colspan="2"><asp:TextBox ID="txtTitle" runat="server" style="width:35em" meta:resourcekey="txtTitleResource1"></asp:TextBox></td>
                    </tr>
                    <tr style="vertical-align:top ">
                        <td><asp:Label ID="lblCalc" runat="server" Text="Add Calculated Series For:" meta:resourcekey="lblCalcResource1"></asp:Label></td>
                        <td>
                            <asp:ListBox ID="lstCalc" runat="server" Width="25em" Rows="6" meta:resourcekey="lstCalcResource1"></asp:ListBox></td>
                        <td>
                            <asp:ListBox ID="lstCalcType" runat="server" Width="15em" Rows="6" meta:resourcekey="lstCalcTypeResource1">
                            <asp:ListItem Value="" Selected="True" meta:resourcekey="ListItemResource3">None</asp:ListItem>
                            <asp:ListItem Value="3" meta:resourcekey="ListItemResource4">Moving Avg: 3 Values</asp:ListItem>
                            <asp:ListItem Value="7" meta:resourcekey="ListItemResource5">Moving Avg: 7 Values</asp:ListItem>
                            <asp:ListItem Value="14" meta:resourcekey="ListItemResource6">Moving Avg: 14 Values</asp:ListItem>
                            <asp:ListItem Value="30" meta:resourcekey="ListItemResource7">Moving Avg: 30 Values</asp:ListItem>
                            <asp:ListItem Value="Crit" meta:resourcekey="ListItemResource8">Criteria Limits</asp:ListItem>
                            </asp:ListBox>
                        </td>
                    </tr>
                    <tr style="vertical-align:top ">
                        <td>
                            <asp:Label ID="lblDelete" runat="server" Text="Delete Series:" meta:resourcekey="lblDeleteResource1"></asp:Label>

                        </td>
                        <td>
                            <div style="width:25em; height:8em; overflow-x:hidden; overflow-y:scroll; border-style:inset; border-width:thin">
                                <asp:CheckBoxList ID="lstDelete" runat="server" Width="25em" meta:resourcekey="lstDeleteResource1"></asp:CheckBoxList>
                            </div>
                        </td>
                        <td>
                            <asp:Button ID="btnCheckAll" runat="server" Text="All" Width="5em" OnClientClick="$('[id*=lstDelete] input:checkbox').prop('checked',true); return false;" meta:resourcekey="btnCheckAllResource1" />
                            <asp:Button ID="btnCheckNone" runat="server" Text="None"  Width="5em" OnClientClick="$('[id*=lstDelete] input:checkbox').prop('checked',false); return false;" meta:resourcekey="btnCheckNoneResource1" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3"><asp:CheckBox ID="chkShowValueLabels" runat="server" Text="Show Value Labels (if 24 or fewer points in series)" meta:resourcekey="chkShowValueLabels"/></td>
                    </tr>
                    <tr>
                        <td colspan="3"><asp:CheckBox ID="chkLogAxisPrimary" runat="server" Text="Make Primary Value Axis Logarithmic" meta:resourcekey="chkLogAxisResource1"/></td>
                    </tr>
                    <tr>
                        <td colspan="3"><asp:CheckBox ID="chkLogAxisSecondary" runat="server" Text="Make Secondary Value Axis Logarithmicxxx" meta:resourcekey="chkLogAxis2Resource1"/></td>
                    </tr>
                </table>
                <div style="display:normal; text-align:right; margin-top:10px">
                    <asp:Button ID="btnOKOptions" runat="server" Text="OK" meta:resourcekey="btnOKOptionsResource1" />
                    <asp:Button ID="btnCancelOptions" runat="server" Text="Cancel" meta:resourcekey="btnCancelOptionsResource1" />
                </div>
            </asp:Panel>
    
        </ContentTemplate>
    </asp:UpdatePanel>

    <div id="divDialogProgress" title="Please stand by..." style="display:none"><div id="divProgress"></div></div>
    
</asp:Content>
